
<template>
  <el-card shadow="always" >
    <!-- <Search :searchTitle="searchTitle" :searchForm2="searchForm"  @doReset="reset"></Search> -->
    <!-- 搜索 -->
    <el-form :model="searchForm"  >
        <el-row :gutter="20">
          <el-col :span="18" :offset="0">
            <el-form-item label="关键词：" class="w-80">
              <el-input v-model="searchForm.keyword" placeholder="搜索关键词"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item >
              <el-button type="primary" @click="getPageDatas">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 身体 -->
      <div class="mt-3">
        <el-button class="mb-3" type="primary" size="small" @click="add">新增</el-button>
        
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column prop="title" label="优惠券名称" width="180" />
          <el-table-column prop="price" label="面值" width="180" />
          <el-table-column prop="add_time" label="添加时间" >
            <template #default="{ row }">
              {{ formatTime(row.add_time) }}
            </template>
          </el-table-column>
          <el-table-column  label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" text size="default" @click="update(scope.row)">编辑</el-button>
              <el-popconfirm title="确认删除？" confirm-button-text="确认" cancel-button-text="取消" @confirm="ydelete(scope.row.id)">
                <template #reference>
                <el-button type="primary" text size="default" >删除</el-button> 
                </template>
              </el-popconfirm>
           </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 flex items-center justify-center mt-5-->
      <div style="display: flex; justify-content: end; margin-top: 20px;">
            <el-pagination 
            background 
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="limit"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, total, sizes, jumper"
            :total="total2"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
        
  </el-card>  
<!-- 抽屉 -->
<FormDrawer :title="drawerTitle" @submit="handleSubmit" ref="formDrawerRef">
  <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" :inline="false" >
    <el-form-item label="优惠券名称" prop="title" width="">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="面值" prop="price">
      <el-input v-model="form.price"></el-input>
    </el-form-item>  
  </el-form>
</FormDrawer>
<!-- dialog -->
<Dialog :title="drawerTitle" @submit="commit" ref="formDrawerRef2">
  <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item label="优惠券名称" prop="title" >
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="面值" prop="price" >
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>
    
    </el-form>
</Dialog>
<!-- <el-dialog v-model="dialogFormVisible" :title="drawerTitle" width="500">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item label="优惠券名称" prop="title" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="面值" prop="price" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>
    
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="commit">
          确定
        </el-button>
      </div>
    </template>
</el-dialog> -->
</template>
<script setup>
import { ref,reactive,computed } from 'vue'
import { youhuiquan,search } from '@/api/manager'
import {
    toast
} from "@/utils/toast.js"
import FormDrawer from "@/components/FormDrawer.vue"
import Search from "@/components/Search.vue"
import Dialog from "@/components/Dialog.vue"
import { showModel } from '@/utils/toast.js'
import { formatTime } from '@/utils/dayjs'

// 搜索
const searchTitle = ref()
searchTitle.value="我是搜索标题："

const searchForm = reactive({
  keyword:"",
})
const tableData = ref([])
const disabled = ref(false)
// 分页
const total2 = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const limit = ref([5,8,10])
const loading = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value = val;
  currentPage.value = 1; // 选择每页几条时，自动打到第一页重新计算数据
  getPageDatas() 
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value = val;
  getPageDatas()
}

// 获取数据+搜索
const getPageDatas = ()=>{
  
  youhuiquan(currentPage.value,pageSize.value,searchForm.keyword)
  .then(res=>{
        console.log(`优惠券数据：${JSON.stringify(res)}`)
        total2.value = res.totalCount
        tableData.value = res.list
  })
  .finally(()=>{
    console.log(`tableData.value:${tableData.value}`)

  })
}
getPageDatas()

// 重置
const reset = ()=>{
  searchForm.keyword = ""
  currentPage.value = 1
  getPageDatas()
}
// 删除
const ydelete = (id)=>{
  console.log(`id:${id}`)
}
// 抽屉
const editId = ref()
const drawerTitle = computed(()=>editId.value ? "编辑" : "新增")
const formRef = ref(null)
const formDrawerRef = ref(null) //调用子组件方法
const form = ref({
  title:"",
  price:""
})
const rules = {
  title:[{
        required: true,
        message: '优惠券名称不能为空',
        trigger: 'blur'
    }],
  price:[{
      required: true,
      message: '优惠券面值不能为空',
      trigger: 'blur'
  }],
}
// 新增
const add2 = ()=>{
  editId.value  = 0
  form.title = ""
  form.price = ""
  formDrawerRef.value.open()
}
// 修改
const update2 = (val)=>{
  editId.value  = 1
  form.title = val.title
  form.price = val.price
  if(formRef.value) formRef.value.clearValidate()
  formDrawerRef.value.open()
}
// 新增+编辑接口
const handleSubmit=()=>{
  formRef.value.validate((valid)=>{
    if(!valid) return
    // formDrawerRef.value.showLoading()
    // const fun = editId.value ? updateImageClass({"editId":editId.value,"form":form}) : createImageClass(form)
    // fun.then(res=>{
    //     // toast("新增成功")
    //     getData(editId.value ? currentPage.value : 1)
    //     formDrawerRef.value.close()
    // })
    // .finally(()=>{
    //     formDrawerRef.value.hideLoading()
    // })
  })
}
// dialog
const formDrawerRef2 = ref(null) //调用子组件方法
const add = ()=>{
  editId.value  = 0
  form.value = {}
  formDrawerRef2.value.open()
}
const update = (val)=>{
  editId.value  = 1
  form.value = {...val}
  if(formRef.value) formRef.value.clearValidate()
  formDrawerRef2.value.open()
}

const commit=()=>{
  formDrawerRef2.value.open()
}
</script>

<style>
</style>